<template>
  <div class="f-hot">
    <expected></expected>
    <movie-list :movieList="movieList"></movie-list>
  </div>
</template>
<script>
import Expected from '@/components/Expected'
import movieList from '../../../components/movieList'
export default {
  data: () => ({
    movieList: []
  }),
  created () {
    this.getMovieList()
    this.$store.dispatch('changeActive', this.$route.path)
  },
  methods: {
    async getMovieList () {
      let that = this
      const {
        data: { coming, movieIds }
      } = await this.$http.get(`/ajax/comingList?ci=${this.$store.state.cityId}&token=&limit=10`)
      this.movieList = coming
      this.movieIds = movieIds
      let temp = ''
      this.movieList.forEach(el => {
        if (el.comingTitle !== temp) {
          temp = el.comingTitle
        } else {
          el.comingTitle = undefined
        }
      })
      document.addEventListener(
        'scroll',
        this.fangdou(function () {
          that.getMoreInfo(this.movieIds)
        }, 500)
      )
    },
    // 更多热映电影防抖
    fangdou (callback, delay) {
      // 定时器
      var timer
      return function () {
        if (timer) {
          // 引用外部函数的timer
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          callback.apply(this, arguments)
        }, delay)
      }
    },
    getMoreInfo (movieIds) {
      var flag = true
      var that = this
      // 获得滚动条距离顶部距离
      var scrollTop = document.documentElement.scrollTop
      // 获取页面高度
      var pageHeight = document.documentElement.scrollHeight
      // 获取视口高度
      var windowHeight = window.innerHeight
      console.log(scrollTop, pageHeight, windowHeight)
      if (scrollTop + pageHeight === windowHeight && flag === true) {
        flag = false
      }
      let arrindex = 12 // 起始数
      let limit = 12 // 显示个数
      let tosee = that.movieIds.splice(arrindex, limit)
      tosee = tosee.join(',')
      that.$http
        .get('/ajax/moreComingList', {
          params: {
            token: '',
            movieIds: tosee
          }
        })
        .then(res => {
          that.coming = res.data.coming
          if (res.data.coming.length !== 0) {
            that.movieList = that.movieList.concat(res.data.coming)
            let temp = ''
            that.movieList.forEach(el => {
              if (el.comingTitle !== temp) {
                temp = el.comingTitle
              } else {
                el.comingTitle = undefined
              }
            })
          } else {
            return false
          }
        })
    }
  },
  components: {
    Expected,
    movieList
  }
}
</script>
<style lang="less" scoped>
</style>
